<template>
	<view class="pageBg">
		<headerView title="课程详情">
			<view class="rightbox flex">
				<image class="icon" @click="collection" v-show="data.is_favorite == 0" src="/static/images/collection.png" mode=""></image>
				<image class="icon" @click="collection" v-show="data.is_favorite !== 0" src="/static/images/collectionAct.png" mode=""></image>
				<image class="icon" @click="share" src="/static/images/share.png" mode=""></image>
			</view>
		</headerView>

		<view class="banner" @click="showVip" v-if="data.videoList && vip === 0 && data.videoList[videoIndex].is_vip == 1">
			<view class="mask">
				<image class="palyBtn imgcentent" src="/static/images/palyBtn.png" mode="aspectFill"></image>
			</view>
			<image class="banner" :src="data.img" mode=""></image>
		</view>
		<video class="banner" v-if="data.videoList && (vip == 1 || (vip == 0 && data.videoList[videoIndex].is_vip == 0))" :src="data.videoList[videoIndex].video" controls :autoplay="true"></video>
		<view class="meterHeader">
			<view class="title">
				{{ data.title }}
			</view>
			<view class="desc">
				{{ data.desc }}
			</view>
			<view class="is_vip" v-if="data.is_vip == 1">VIP专享</view>
		</view>
		<view class="tabList flex">
			<view class="item" :class="tabIndex === 0 ? 'itemAct' : ''" @click="tabIndex = 0">课程介绍</view>
			<view class="item" :class="tabIndex === 1 ? 'itemAct' : ''" @click="tabIndex = 1">课程目录</view>
		</view>
		<view class="centent" v-html="data.centent" v-show="tabIndex === 0"></view>
		<view class="videoList" v-show="tabIndex === 1">
			<view class="item flex" v-for="(i, index) in data.videoList" @click="play(index)">
				<divImg class="img" :src="i.v_img" mode="aspectFill"></divImg>
				<view class="box spaceEvenly">
					<view class="title">
						{{ i.v_name }}
					</view>
					<view class="flex">
						<image class="suspend" v-show="videoIndex === index" src="/static/images/suspend.png" mode="heightFix"></image>
						<image class="play" v-show="videoIndex !== index" src="/static/images/play.png" mode="heightFix"></image>
						<view>{{ vip == 1 ? '播放' : i.is_vip == 0 ? '可试看' : 'VIP专享' }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// computed: {
		// 	tryToSeeTxt() {
		// 		const txt=this.vip==1 ? '播放':  '可试看'
		// 		return txt
		// 	}
		// },
		data() {
			return {
				id: '',
				data: {},
				videoIndex: 0,
				tabIndex: 0,
				vip: 0,
			};
		},
		onLoad({ id }) {
			const { vip } = uni.getStorageSync('loginData');
			this.vip = vip;
			this.id = id;
			this.init();
		},
		methods: {
			async init() {
				const res = await this.$api.CourseGetInfo({ id: this.id });
				res.data.centent = this.imgAddStyle(res.data.centent);

				this.data = res.data;
			},
			async collection() {
				await this.$api.FavoriteEdit({ type: 4, id: this.data.id });
				this.init();
			},
			share() {
				let url = 'pages/index/future/detail/detail?id=' + this.id;
				uni.setStorageSync('detailItem', this.data);
				uni.navigateTo({
					url: '/pages/index/future/share/share?page=' + url,
				});
			},
			showVip() {
				uni.showModal({
					title: 'vip专享视频',
					content: '是否前往开通vip',
					confirmText: '立即开通',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/index/vip/vip',
							});
						}
					},
				});
			},
			play(index) {
				if (this.vip != 1 && this.data.videoList[index].is_vip == 1) {
					this.showVip();
					return;
				}
				this.videoIndex = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		.rightbox {
			align-items: center;
			.icon {
				width: 35rpx;
				height: 35rpx;
				margin-left: $margin-width;
			}
		}
		.banner {
			width: 100%;
			height: 422rpx;
			position: relative;
			.mask {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
				background: #000000;
				opacity: 0.2;
				.palyBtn {
					width: 50px;
					height: 61px;
					z-index: 3;
				}
			}

			.video {
				width: 100%;
				height: 100%;
			}
		}
		.meterHeader {
			overflow: hidden;
			width: auto;
			padding: $margin-width;
			height: auto;
			background: #ffffff;
			.title {
				width: $connet-width;
				color: #000000;
				font-size: $uni-font-size-17;
				margin: 0 0 $submargin-width;
			}
			.desc {
				color: #666666;
				font-size: $uni-font-size-12;
				margin: 0 0 $submargin-width;
			}
			.is_vip {
				font-weight: bold;
				color: $price-color;
			}
		}
		.tabList {
			overflow: hidden;
			margin: $margin-width;
			.item {
				font-size: $uni-font-size-14;
				color: #999999;
				margin-right: $margin-width;
			}
			.itemAct {
				font-size: $uni-font-size-14;
				font-weight: bold;
				color: #000000;
			}
		}
		.centent {
			width: 650rpx;
			margin: $margin-width;
			background: #ffffff;
			padding: $submargin-width;
		}
		.videoList {
			.item {
				margin: 0 auto $submargin-width;
				width: $connet-width;
				background: $content-bg-colcor;
				.img {
					width: 320rpx;
					height: 180rpx;
					margin-right: $submargin-width;
				}
				.box {
					flex-direction: column;

					.title {
						font-weight: bold;
						color: #000000;
						font-size: $uni-font-size-14;
					}
					.flex {
						align-items: center;
						color: #999999;
						font-size: $uni-font-size-12;
						.suspend {
							// border: 14rpx solid rgba(255, 255, 255, 0);
							// border-left: 14rpx solid $price-color;
							margin-right: 5rpx;
							width: 20rpx;
							height: 20rpx;
						}
						.play {
							width: 14rpx;
							height: 17rpx;
							// color: $price-color;
							margin-right: 7rpx;
							// font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
